<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <link rel="stylesheet" href="https://libs.cdnjs.net/twitter-bootstrap/1.4.0/css/bootstrap.css"/>
    <style>
        label[for] {
            width: 350px;
            float: none;
        }

        label[for="keyword"] {
            float: right;
        }

        div[id="app"] {
            margin: 20px 20px;
        }

        .toolbar {
            margin: 10px 0px;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="toolbar">
        <label for="id">
            ID:<input type="text" v-model="id" id="id"/></label>
        <label for="name">
            Name:<input type="text" v-model="name" id="name" @keyup.enter="add"/></label>
        <button class="btn btn-primary" @click="add">add</button>
        <label for="keyword">
            Keyword:<input type="text" v-model="keyword" id="keyword"
                           @keyup.enter="search(keyword)" v-focus v-color="'blue'"/></label>
    </div>
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <td>Index</td>
            <td>Id</td>
            <td>Name</td>
            <td>Date</td>
            <td>Option</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, i) in brands" :key="i">
            <!--<td >{{ i }}</td>-->
            <td v-text="i"></td>
            <td v-text="item.id"></td>
            <td v-text="item.name"></td>
            <td v-cloak> {{ item.date | formatDate }}</td>
            <td><a href="#" @click.prevent="del(item.id)">delete</a></td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--vue-resource发送http请求, 依赖vue.js, 该库向Vue挂载 this.$http(.get/post/jsonp..)属性，使用该属性完成请求-->
<script src="https://libs.cdnjs.net/vue-resource/1.5.1/vue-resource.js"></script>

<script>
    // 全局配置
    // 根路径配置，注意：后续get/post操作的uri不要加 / 前缀
    // 使用vue10 webserver-express.js nodejs服务器
    Vue.http.options.root = 'http://localhost:9000/';
    Vue.http.options.emulateJSON = true; // 提交增加 x-www-form-urlencoded 头

    var vm = new Vue({
        el: '#app',
        data: {
            id: null,
            name: null,
            keyword: null,
            brands: [
                {id: 1, name: 'Nike', date: new Date()},
                {id: 2, name: 'Adidas', date: new Date()}
            ],
        },
        created() {
            // vue实例创建完毕加载数据
            this.search();
        },
        methods: {
            add() {
                let brand = {id: this.id, name: this.name, date: new Date().toLocaleString()};
                console.log('brand => ', brand);
                this.$http.post('save', brand, {}).then(result => {
                    if (result.status == 200) {
                        this.search();
                    } else {
                        console.error(result);
                        alert('status code error!');
                    }
                }, error => {
                    console.error('request error', error);
                });
            },
            del(id) {
                this.$http.post('del', {id: id}, {}).then(result => {
                    if (result.status == 200) {
                        this.search();
                    } else {
                        console.error(result);
                        alert('status code error!');
                    }
                }, error => {
                    console.error('request error', error);
                });
            },
            search(keyword = '') {
                console.log('keyword => ', keyword);
                this.$http.get('list?keyword=' + keyword).then(result => {
                    // console.log(result, result.body, result.data);
                    if (result.status === 200) {
                        this.brands = result.data;
                    } else {
                        console.error(result);
                        alert('status code error!');
                    }
                }, error => {
                    console.error('request error', error);
                });
            }
        },
        directives: {
            focus: {
                inserted: el => {
                    el.focus(); // 文档聚焦需要在插入到dom以后执行
                }
            },
            color: (el, binding) => { // 简写代表代码在bind/update中运行，设置样式可以在bind 和 update 中进行
                el.style.color = binding.value;
            }
        },
        filters: {
            formatDate: function (date) {
                if (date instanceof Date) {
                    return date.toLocaleString();
                    // return date.toLocaleDateString() + date.toLocaleTimeString();
                }
                return date;
            }
        }
    })
</script>

</body>
</html>
